<template>
	<view class="login">
		<view class="content-wrapper">
			<!-- <view class="title">
				<image src="../../static/image/vote_log.png"></image>
				<h1>欢迎使用微投票</h1>
			</view> -->
			<view class="login-form">
				<view class="login-form-items">
					<view class="login-form-items-title">手机号</view>
					<input type="number" class="login-input" placeholder="手机号" v-model="form.phone" maxlength="11" />
				</view>
				<view class="login-form-items">
					<view class="login-form-items-title">验证码</view>
					<input type="text" style="width:100px" class="login-input" placeholder="验证码" v-model="form.code"
						maxlength="4" />
					<button style="background-color: #1296db" type="primary" @click="sendEmailHandler">获取验证码</button>
				</view>
				<view class="login-form-items">
					<view class="login-form-items-title">新密码</view>
					<input v-model="form.password" :type="pwd_show?'text':'password'" class="login-input" maxlength="20"
						placeholder="数字或字母且不少于6位" />
					<image class="password_img" @click="change_pwd(1)" style="width: 25px; height: 15px;"
						:src="pwd_show? '/static/image/eye_open.png':'/static/image/eye_close.png'"></image>
				</view>
				<view class="login-form-items">
					<view class="login-form-items-title">确认密码</view>
					<input v-model="form.confirmPassword" :type="pwd_cshow?'text':'password'" maxlength="20"
						class="login-input" placeholder="请输入确认密码" />
					<image class="password_img" @click="change_pwd(2)" style="width: 25px; height: 15px;"
						:src="pwd_cshow? '/static/image/eye_open.png':'/static/image/eye_close.png'"></image>
				</view>
			</view>
		</view>
		<div class="submit-wrapper">
			<button style="background-color: #1296db;" type="primary" class="login-btn"
				@click="registerHandler">重置密码</button>
		</div>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useRouter,
		toast,
		clearStorageSync,
		setStorageSync,
		getStorageSync
	} from '@/utils/index.js'

	import {
		byMail,
		checkPhone,
		resetPsdByMail
	} from '@/api/userInfo.js'


	const imagUrl = ref("")
	const uuid = ref('')
	const pwd_show = ref(false)
	const pwd_cshow = ref(false)
	const form = ref({
		phone: '',
		password: '',
		confirmPassword: '',
		code: ''
	})
	const change_pwd = (type) => {
		if (type == 1) {
			pwd_show.value = !pwd_show.value
		} else {
			pwd_cshow.value = !pwd_cshow.value
		}
	}

	const goTo = () => {
		useRouter("/pages/login/login")
	}
	const checkPhoneHander = async () => {
		const result = await checkPhone(form.value.phone)
		return result.isRegister
	}
	const sendEmailHandler = async () => {
		var phonePattern = /^1[3456789]\d{9}$/;
		//手机号码校验
		if (!form.value.phone) {
			toast("手机号不能为空")
			return
		} else if (!phonePattern.test(form.value.phone)) {
			toast("输入正确的手机号")
			return
		} else {
			const result = await byMail(form.value.phone)
			if (result.flag) {
				uuid.value = result.UUID;
				setStorageSync("forget_uuid", result.UUID);
				toast("发送邮件成功")
			}
		}
	}
	const registerHandler = async () => {
		var phonePattern = /^1[3456789]\d{9}$/;
		var passwordPattern = /^[A-Za-z0-9]{6,20}$/
		//手机号码校验
		if (!form.value.phone) {
			toast("手机号不能为空")
			return
		} else if (!phonePattern.test(form.value.phone)) {
			toast("输入正确的手机号")
			return
		} 
		if (!form.value.code) {
			toast("验证码不能为空")
			return
		}
		else if (!passwordPattern.test(form.value.password)) {
			toast("输入数字或字母且不少于6位的密码")
			return
		} else if (form.value.password !== form.value.confirmPassword) {
			toast("输入密码和确认密码不一样")

		} else {
			toast("调用后端接口")
			const result = await resetPsdByMail({
				...form.value,
				uuid: uuid.value || getStorageSync("forget_uuid")
			});
			if (result.flag) {
				toast("重置成功，将跳转登录页面")
				clearStorageSync()
				useRouter('/pages/login/login', 'reLaunch')
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F4F5F6;
	}

	.img_code {
		width: 60px;
		height: 30px;
	}

	.login {
		.content-wrapper {
			width: 100%;

			.title {
				margin-top: 35rpx;
				width: 100%;
				margin-bottom: 10px;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 30px;
					height: 30px;
					margin-right: 5px;
				}

				h1 {
					border: 0px;
					text-align: center;
					height: 50px;
					line-height: 50px;
					font-size: 17px;
					overflow: hidden;
					font-weight: 400;
				}
			}

			.login-form {
				margin: 20px 10px 20px 15px;
				background: #FFFFFF;

				.login-form-items {
					padding: 15px 10px;
					border-bottom: 1px solid #F3F4F5;
					position: relative;
					display: -webkit-flex;
					display: flex;
					align-items: center;

					.login-form-items-title {
						width: 25%;
						line-height: 22px;
						height: 22px;
						flex-shrink: 0;
					}

					.login-input {
						width: 100%
					}

				}
			}
		}

		.submit-wrapper {
			padding: 10px;
			padding-top: 10px;
			background-color: 11ffff;
		}
	}

	.footer {
		padding: 10px;
		display: flex;
	}
</style>